<template>
  <div>
    <Modal
        v-model="modal"
        title="Common Modal dialog box title">
      <div id="qrcode"></div>
      <div v-if="time === 0" class="zzcClass" @click="getLoginQrcodeAuthentication">
        <span style="color:white;zindex:100">二维码已失效，点击刷新</span>
      </div>
    </Modal>
  </div>
</template>
<script>
import QRCode from 'qrcodejs2'
import { getLoginQrcodeAuthentication } from '../../api/eventlist'
export default {
  name: 'SstFaceAuthentication',
  data () {
    return {
      modal: false,
      qrcode: '',
      time: 10
    }
  },
  methods: {
    SCQrCode (e) {
      this.qrcode = new QRCode('qrcode', {
        text: e,
        width: 200,
        height: 200,
        // render: 'canvas' // 设置渲染方式（有两种方式 table和canvas，默认是canvas）
        colorDark: '#000000',
        colorLight: '#ffffff',
        correctLevel: 3
      })
    },
    getLoginQrcodeAuthentication () {
      this.qrcode = null
      getLoginQrcodeAuthentication().then(ret => {
        if (ret.data.errcode === 0) {
          let result = ret.data.data
          this.time = result.timeout
          this.SCQrCode(result.url)
          this.jsq()
        } else {
          this.$Notice.error({ title: '查询失败！', desc: ret.data.errmsg })
        }
      })
    },
    jsq () {
      let _this = this
      _this.jsqID = setInterval(function () {
        if (_this.time !== 0) {
          _this.time--
        } else {
          clearInterval(_this.jsqID)
        }
        console.log('time', _this.time)
      }, 1000)
      console.log('jsqID', _this.jsqID)
    }
  },
  // mounted () {
  //   this.getLoginQrcodeAuthentication()
  // },
  watch: {
    modal (val) {
      if (val) {
        this.getLoginQrcodeAuthentication()
      }
    }
  }
}
</script>
<style scoped>
.zzcClass{
  width: 200px;
  height: 200px;
  line-height: 200px;
  background-color: #8D8D8D;
  text-align: center;
  opacity: 0.9;
  position: relative;
  top: -200px;
  z-index: 10;
  color:white
}
</style>
